<template>
  <div class="box">
    <div class="material-information">
      <div class="suppliers-title">
        <div class="line" />
        <span>{{ isedit ? '编辑物料' : '新增物料' }}</span>
      </div>
      <el-form ref="ruleFormRef"
        style="padding: 2rem 5rem; display: flex; flex-wrap: wrap; justify-content: space-between" :model="ruleForm"
        :rules="rules" label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>
        <el-form-item label="物料编号" prop="matnr" class="materialinput">
          <el-input v-model="ruleForm.matnr" maxlength="64" show-word-limit placeholder="请输入物料编号" />
        </el-form-item>
        <el-form-item label="物料名称" prop="maktxZh" class="materialinput">
          <el-input v-model="ruleForm.maktxZh" maxlength="64" show-word-limit placeholder="请输入物料名称" />
        </el-form-item>
        <el-form-item label="供方料号" prop="idnlf" class="materialinput">
          <el-input v-model="ruleForm.idnlf" maxlength="64" show-word-limit placeholder="请输入供方料号" />
        </el-form-item>
        <el-form-item label="物料类型" prop="attyp" class="materialselect" style="">
          <el-select v-model="ruleForm.attyp" placeholder="请选择物料类型">
            <el-option label="原材料" value="rawmaterials" />
            <el-option label="非原材料" value="norawmaterials" />
          </el-select>
        </el-form-item>
        <el-form-item label="物料组" prop="matkl" class="materialselect" style="">
          <el-select v-model="ruleForm.matkl" placeholder="请选择物料组">
            <el-option label="原材料" value="rawmaterials" />
            <el-option label="非原材料" value="norawmaterials" />
          </el-select>
        </el-form-item>
        <el-form-item label="产品组" prop="spart" class="materialselect" style="">
          <el-select v-model="ruleForm.spart" placeholder="请选择产品组">
            <el-option label="原材料" value="rawmaterials" />
            <el-option label="非原材料" value="norawmaterials" />
          </el-select>
        </el-form-item>
        <el-form-item label="规格" prop="groes" class="materialinput">
          <el-input v-model="ruleForm.groes" maxlength="64" show-word-limit placeholder="请输入规格" />
        </el-form-item>
        <el-form-item label="基本单位" prop="meins" class="materialselect" style="">
          <el-select v-model="ruleForm.meins" placeholder="请选择基本单位">
            <el-option label="头" value="rawmaterials" />
            <el-option label="件" value="norawmaterials" />
          </el-select>
        </el-form-item>
        <el-form-item label="物料状态" prop="materialState" class="materialselect" style="">
          <el-select v-model="ruleForm.materialState" placeholder="请选择物料状态">
            <el-option label="禁用" value="0" />
            <el-option label="启用" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="重量单位" prop="gewei" class="materialselect" style="">
          <el-select v-model="ruleForm.gewei" placeholder="请选择重量单位">
            <el-option label="千克" value="kg" />
            <el-option label="吨" value="t" />
          </el-select>
        </el-form-item>
        <el-form-item label="长度单位" prop="lengthUnit" class="materialselect" style="">
          <el-select v-model="ruleForm.lengthUnit" placeholder="请选择长度单位">
            <el-option label="M" value="kg" />
            <el-option label="KM" value="t" />
          </el-select>
        </el-form-item>
        <el-form-item label="宽度" prop="breit" class="materialinput">
          <el-input v-model="ruleForm.breit" maxlength="30" show-word-limit placeholder="请输入宽度" />
        </el-form-item>
        <el-form-item label="数量" prop="wesch" class="materialinput">
          <el-input v-model="ruleForm.wesch" maxlength="30" show-word-limit placeholder="请输入数量" />
        </el-form-item>
        <el-form-item label="毛重" prop="brgew" class="materialinput">
          <el-input v-model="ruleForm.brgew" maxlength="30" show-word-limit placeholder="请输入毛重" />
        </el-form-item>
        <el-form-item label="净重" prop="ntgew" class="materialinput">
          <el-input v-model="ruleForm.ntgew" maxlength="30" show-word-limit placeholder="请输入净重" />
        </el-form-item>
        <el-form-item label="长度" prop="laeng" class="materialinput">
          <el-input v-model="ruleForm.laeng" maxlength="30" show-word-limit placeholder="请输入长度" />
        </el-form-item>
        <el-form-item label="高度" prop="hoehe" class="materialinput">
          <el-input v-model="ruleForm.hoehe" maxlength="30" show-word-limit placeholder="请输入高度" />
        </el-form-item>
      </el-form>
    </div>

    <div class="material-addinformation">
      <div class="material-addinformation-title">物料的工厂数据</div>
      <div class="addmaterialbtn" @click="addmatereal">添加一行</div>
      <el-table :data="tableData" border style="width: 100%" size="default"
        :header-cell-style="{ backgroundColor: '#F8F8F9', color: '#333', fontSize: '14px' }">
        <el-table-column type="index" label="行项目" align="center" width="90" />
        <el-table-column prop="factory" label="工厂">
          <template #default="scope">
            <el-select v-model="scope.row.factory" size="default" placeholder="请选择工厂">
              <el-option label="友达公司" value="kg" />
              <el-option label="其他公司" value="t" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="purchasgroup" label="采购组">
          <template #default="scope">
            <el-select v-model="scope.row.purchasgroup" size="default" placeholder="请选择采购组">
              <el-option label="第一组" value="kg" />
              <el-option label="第二组" value="t" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="Deliverydays" label="计划交货天数">
          <template #default="scope">
            <el-input v-model="scope.row.Deliverydays" size="default" maxlength="30" show-word-limit
              placeholder="请输入计划交货天数" />
          </template>
        </el-table-column>
        <el-table-column prop="safestock" label="安全库存">
          <template #default="scope">
            <el-input v-model="scope.row.safestock" size="default" maxlength="30" show-word-limit
              placeholder="请输入安全库存" />
          </template>
        </el-table-column>
        <el-table-column prop="profitcenter" label="利润中心">
          <template #default="scope">
            <el-input v-model="scope.row.profitcenter" size="default" maxlength="30" show-word-limit
              placeholder="请输入利润中心" />
          </template>
        </el-table-column>
        <el-table-column prop="operation" label="操作" align="center" width="90">
          <template #default="scope">
            <el-button plain class="deltext" size="default" @click="delmatereal(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="materialinfobtn">
        <div class="materialinfobtn-1" @click="materialinfoadd(ruleFormRef)">{{ isedit ? '更改' : '新增' }}</div>
        <div class="materialinfobtn-2" @click="gomateriallist">取消</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch, onMounted } from 'vue'
import type { Action, ComponentSize, FormInstance, FormRules, TableColumnCtx } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { materialadd, getoneinfo } from '@/api/material'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()
const isedit = ref(false)


watch(() => route.params.id, (newId, oldId) => {
  // 对路由变化做出响应...
})

onMounted(() => {
  if (route.query.id) {
    isedit.value = true;
    const data = {
      id: route.query.id
    }
    getoneinfo(data).then(data => {
      console.log(data.data)
      ruleForm.value = data.data
    })
  }
})


interface RuleForm {
  id?: string
  matnr: string
  maktxZh: string
  idnlf: string
  attyp: string
  matkl: string
  spart: string
  groes: string
  meins: string
  materialState: string
  gewei: string
  lengthUnit: string
  breit: string
  wesch: string
  brgew: string
  ntgew: string
  laeng: string
  hoehe: string
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
  id:'',
  matnr: '',
  maktxZh: '',
  idnlf: '',
  attyp: '',
  matkl: '',
  spart: '',
  groes: '',
  meins: '',
  materialState: '',
  gewei: '',
  lengthUnit: '',
  breit: '',
  wesch: '',
  brgew: '',
  ntgew: '',
  laeng: '',
  hoehe: ''
})

const rules = reactive<FormRules<RuleForm>>({
  matnr: [
    { required: true, message: '物料编号不能为空', trigger: 'blur' },
    { max: 64, message: '最多不能超过64个字符', trigger: 'blur' }
  ],
  maktxZh: [
    { required: true, message: '物料名称不能为空', trigger: 'blur' },
    { max: 64, message: '最多不能超过64个字符', trigger: 'blur' }
  ],
  idnlf: [{ max: 64, message: '最多不能超过64个字符', trigger: 'blur' }],
  attyp: [
    {
      required: true,
      message: '请选择物料类型',
      trigger: 'change'
    }
  ],
  groes: [
    { required: true, message: '规格不能为空', trigger: 'blur' },
    { max: 64, message: '最多不能超过64个字符', trigger: 'blur' }
  ],
  meins: [
    {
      required: true,
      message: '请选择基本单位',
      trigger: 'change'
    }
  ],
  materialState: [
    {
      required: true,
      message: '请选择物料状态',
      trigger: 'change'
    }
  ],
})

// 物料添加
const materialinfoadd = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      const data = <RuleForm>{
        matnr: ruleForm.value.matnr,
        maktxZh: ruleForm.value.maktxZh,
        idnlf: ruleForm.value.idnlf,
        attyp: ruleForm.value.attyp,
        matkl: ruleForm.value.matkl,
        spart: ruleForm.value.spart,
        groes: ruleForm.value.groes,
        meins: ruleForm.value.meins,
        materialState: ruleForm.value.materialState,
        gewei: ruleForm.value.gewei,
        lengthUnit: ruleForm.value.lengthUnit,
        breit: ruleForm.value.breit,
        wesch: ruleForm.value.wesch,
        brgew: ruleForm.value.brgew,
        ntgew: ruleForm.value.ntgew,
        laeng: ruleForm.value.laeng,
        hoehe: ruleForm.value.hoehe,
        tableData: tableData.value
      }
      if (isedit.value){
        data.id = route.query.id as string
      }
      materialadd(data)
        .then((data) => {
          let msg = ''
          if (isedit.value) {
            msg = '修改成功'
          }else{
            msg = '新增成功'
          }
          ElMessage({
            type: 'success',
            message: msg
          })
        })
        .catch((err) => {
          ElMessage({
            type: 'error',
            message: err
          })
        })
    } else {
      console.log('error submit!')
    }
  })
}
const gomateriallist = () => {
  router.push({
    name: 'debounce',
    query: {}
  })
}

interface Product {
  id: string
  factory: string
  purchasgroup: string
  Deliverydays: string
  safestock: string
  profitcenter: string
}
const tableData = ref<Product[]>([
  {
    id: '',
    factory: '',
    purchasgroup: '',
    Deliverydays: '',
    safestock: '',
    profitcenter: ''
  }
])
const addmatereal = () => {
  const newmaterial = {
    id: (tableData.value.length + 1).toString(),
    factory: '',
    purchasgroup: '',
    Deliverydays: '',
    safestock: '',
    profitcenter: ''
  }
  tableData.value.push(newmaterial)
}
const delmatereal = (id: string) => {
  ElMessageBox.confirm('你是否要删除掉这条数据?', '删除', {
    distinguishCancelAndClose: true,
    confirmButtonText: '删除',
    cancelButtonText: '取消',
    confirmButtonClass: 'propfirmbtn'
  })
    .then(() => {
      tableData.value.forEach((item, index) => {
        if (item.id === id) {
          tableData.value.splice(index, 1)
        }
      })
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
    })
    .catch((action: Action) => {
      ElMessage({
        type: 'info',
        message: action === 'cancel' ? '取消删除' : 'Stay in the current route'
      })
    })
}
</script>

<style lang="scss">
.box {
  background: #f8f8f8;
  width: 100%;
  height: 89vh;
  box-sizing: border-box;
  padding: 15px 0;
}

.material-information {
  width: 98%;
  margin: 0px auto;
  background: #fff;
  border-radius: 10px;
  max-height: 420px;
  box-sizing: border-box;
}

.demo-ruleForm::after {
  content: '';
  width: 30%;
  height: 50px;
  /* background-color: #eeeeee; */
}

.materialinput {
  width: 30%;
}

.materialselect {
  width: 25%;
  margin-right: 5%;
}

.material-addinformation {
  width: 98%;
  margin: 0px auto;
  background: #fff;
  border-radius: 10px;
  max-height: 70vh;
  box-sizing: border-box;
  margin-top: 20px;
  padding: 3rem;
}

.material-addinformation-title {
  font-size: 22px;
  font-weight: bold;
  font-family: initial;
}

.addmaterialbtn {
  background: #578c43;
  border-radius: 10px;
  color: #fff;
  text-align: center;
  line-height: 40px;
  height: 40px;
  padding: 0 10px;
  width: 100px;
  font-size: 16px;
  margin: 20px 0;
  cursor: pointer;
}

.deltext {
  cursor: pointer;
  color: #578c43 !important;
  border: none;
}

.propfirmbtn {
  background-color: #578c43 !important;
}

.materialinfobtn {
  display: flex;
  width: 100%;
  margin-top: 20px;
  flex-direction: row-reverse;
}

.materialinfobtn-1 {
  background: #578c43;
  border-radius: 10px;
  color: #fff;
  text-align: center;
  line-height: 40px;
  height: 40px;
  padding: 0 10px;
  width: 100px;
  font-size: 16px;
  margin: 20px 0;
  cursor: pointer;
  margin-left: 20px;
}

.materialinfobtn-2 {
  background: #fff;
  border: 1px solid #dfe2e8;
  border-radius: 10px;
  color: #333;
  text-align: center;
  line-height: 40px;
  height: 40px;
  padding: 0 10px;
  width: 100px;
  font-size: 16px;
  margin: 20px 0;
  cursor: pointer;
}

.suppliers-title {
  display: flex;
  padding: 3rem;
  padding-bottom: 0;
  font-size: 22px;
  font-family: initial;
}

.line {
  width: 5px;
  height: 22px;
  background-color: #578c43;
  margin-right: 10px;
}
</style>
